
<template>
  <div class="_wz_hiddenDangersTroubleshootDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="11%" />
        <col width="23%" />
        <col width="10%" />
        <col width="23%" />
        <col width="10%" />
        <col width="22%" />
      </colgroup>
      <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="6">隐患排查</td>
        </tr>
        <tr>
          <td style="text-align: center;">隐患排查</td>
          <td colspan="3">{{!!riskListDetailEntityList.riskInspectName ? riskListDetailEntityList.riskInspectName : "--" }}</td>
          <td style="text-align: center;">排查状态</td>
          <td>
            <Tag color="error" type="dot" v-if="riskListDetailEntityList.riskInspectState == 0">未开始</Tag>
            <Tag color="success" type="dot" v-if="riskListDetailEntityList.riskInspectState == 1">已完成</Tag>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">隐患清单</td>
          <td>
            {{!!riskListDetailEntityList.riskPositionName ? riskListDetailEntityList.riskPositionName : "--" }}
            <Tag color="warning" v-if="riskListDetailEntityList.riskInspectVehiclePlateNo">{{ riskListDetailEntityList.riskInspectVehiclePlateNo }}</Tag>
          </td>
          <td style="text-align: center;">清单类型</td>
          <td>
            <Tag color="success" type="dot" v-if="riskListDetailEntityList.riskPositionType == 1">基础管理</Tag>
            <Tag color="primary" type="dot" v-if="riskListDetailEntityList.riskPositionType == 2">设备设施</Tag>
            <Ta color="warning" type="dot" v-if="riskListDetailEntityList.riskPositionType == 3">作业活动</Ta>
          </td>
          <td style="text-align: center;">特种设备</td>
          <td>{{!!riskListDetailEntityList.riskPositionDeviceState ? "是" : "否" }}</td>
        </tr>
        <tr>
          <td style="text-align: center;">排查数量</td>
          <td>
            {{!!riskListDetailEntityList.riskPositionItemCheckCount ? riskListDetailEntityList.riskPositionItemCheckCount : 0 }}
            /
            {{!!riskListDetailEntityList.riskPositionItemAllCount ? riskListDetailEntityList.riskPositionItemAllCount : 0 }}
            项
          </td>
          <td style="text-align: center;">隐患数量</td>
          <td>
            {{!!riskListDetailEntityList.riskPositionItemAtCount ? riskListDetailEntityList.riskPositionItemAtCount : 0 }} 项
          </td>

          <td style="text-align: center;">排查类型</td>
          <td>
            <Tag color="primary" type="dot" v-if="riskListDetailEntityList.riskInspectType == 1">计划排查</Tag>
            <Tag color="success" type="dot" v-if="riskListDetailEntityList.riskInspectType == 2">主动排查</Tag>
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">排查部门</td>
          <td>{{!!riskListDetailEntityList.riskInspectInOrgName ? riskListDetailEntityList.riskInspectInOrgName : "--" }}</td>
          <td style="text-align: center;">排查人员</td>
          <td>{{!!riskListDetailEntityList.riskInspectUserName ? riskListDetailEntityList.riskInspectUserName : "--" }}</td>
          <td style="text-align: center;">时间范围</td>
          <td>
            {{!!riskListDetailEntityList.riskInspectStartDate ? riskListDetailEntityList.riskInspectStartDate: "--" }}
            至
            {{!!riskListDetailEntityList.riskInspectEndDate ? riskListDetailEntityList.riskInspectEndDate : "--" }}
          </td>
        </tr>
        <tr>
          <td style="text-align: center;">经营企业</td>
          <td colspan="3">{{!!riskListDetailEntityList.deptName ? riskListDetailEntityList.deptName : "--" }}</td>
          <td style="text-align: center;">创建时间</td>
          <td>{{!!riskListDetailEntityList.createTime ? riskListDetailEntityList.createTime : "--" }}</td>
        </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0" style="border-top: 0px;">
      <colgroup>
        <col width="11%" />
        <col width="10%" />
        <col width="20%" />
        <col width="10%" />
        <col width="20%" />
        <col width="10%" />
        <col width="19%" />
      </colgroup>
      <tbody>
        <tr>
          <td style="font-weight: 600;position:relative;" colspan="7">排查清单</td>
        </tr>
        <template v-for="(item, index) in riskInspectItemList">
          <tr>
            <td rowspan="6">
              <Tag color="blue">第 {{ index + 1 }} 项</Tag>
            </td>
            <td>隐患项目</td>
            <td colspan="3">{{!!item.riskPositionItemName ? item.riskPositionItemName : "--" }} </td>
            <td>排查状态</td>
            <td>
              <Tag type="dot" color="warning" v-if="item.riskInspectItemProcess == 0">未排查</Tag>
              <Tag type="dot" color="primary" v-else>已排查</Tag>
            </td>
          </tr>
          <tr>
            <td>检查标准</td>
            <td colspan="5">{{ item.riskPositionItemCriterion }}</td>
          </tr>
          <tr>
            <td>失控表现</td>
            <td colspan="5">{{ item.riskPositionItemPerformance }}</td>
          </tr>
          <tr>
            <td>管控措施</td>
            <td colspan="5">{{ item.riskPositionItemMeasures }}</td>
          </tr>
          <tr>
            <td>个人防护</td>
            <td colspan="5">{{ item.riskPositionItemProtect }}</td>
          </tr>
          <tr>
            <td>应急措施</td>
            <td colspan="5">{{ item.riskPositionItemBurst }}</td>
          </tr>
        </template>
      </tbody>
    </table>
  </div>
</template>
<script>



import {getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex

//reactive
export default defineComponent({
  name: 'hiddenPerilsDetails',//组件名称
  components: {
  },//组件引用
  props: ["selectData"], //接收来自父组件的数据
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用


    const state = reactive({
      riskListDetailEntityList: {},
      riskInspectItemList: [],

    });

    const loadData = ()=>{
      state.riskListDetailEntityList = props.selectData;


      $axios.post(apiUrl.riskInspectRiskInspectItemList,{  riskInspectUuid: props.selectData.uuid}).then((res) => {
        if(!!res.data){
          state.riskInspectItemList = res.data.data;
        }

      }).catch((err) => {
        console.log("失败", err)
      })
    }


    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")
      loadData()
    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
    }
  }
})
</script>
<style lang="less">
._wz_hiddenDangersTroubleshootDetails {
  table {
    border-top: 1px solid #515a6e;
    border-left: 1px solid #515a6e;
    width: 100%;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border-right: 1px solid #515a6e;
      border-bottom: 1px solid #515a6e;
      padding-left: 18px;
      padding-right: 18px;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 200px;
    height: 140px;
    text-align: center;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;

    img {
      min-height: 10%;
      max-height: 90%;
      min-width: 10%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}
</style>
